<!--新增套餐列表-->
<template>
  <ele-modal
    width="550px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改套餐' : '新增套餐'"
    @update:visible="updateVisible"
  >
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="70px"
      @keyup.enter.native="submit"
      @submit.native.prevent>
      <el-form-item label="套餐名称" prop="packageName" >
        <el-input
          v-model="form.packageName"
          placeholder="请输入当前套餐名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="套餐天数" prop="packageDays" class="delInput">
        <el-input
          type="number"
          v-model="form.packageDays"
          placeholder="请输入当前套餐天数"
          clearable
        />
      </el-form-item>
      <el-form-item label="套餐价格" prop="packageDays" class="delInput">
        <el-input
          type="number"
          v-model.number="form.packageDays"
          placeholder="请输入当前套餐价格"
          clearable
        />
      </el-form-item>
      <div class="slecet-btn">
        <el-button @click="updateVisible(false)" size="small">取消</el-button>
        <el-button type="primary" @click="confirm" size="small">确认</el-button>
      </div>
    </el-form>
  </ele-modal>
</template>

<script>
  import {saveCamera,updateCamera} from "@/api/lncomingManagement/cameraPackage"
  export default {
    name: "new-card",
    props: {
      // 弹窗是否打开
      visible: Boolean,
    },
    data(){
      return {
      isUpdate:false,
        form: {},
        rules: {
          packageName: [
            {
              required: true,
              message: '请输入套餐名称',
              trigger: 'blur'
            }
          ],
          packageDays: [
            {
              required: true,
              message: '请输入套餐天数',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    methods: {
      show(row){
        console.log("show",row)
        this.isUpdate = row && row.packageName ? true : false
        console.log("this.isUpdate",this.isUpdate)
        this.form=row ? row : {}
      },
      /* 更新 visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      // 确认
      confirm(){
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }
          let cameraApi= this.isUpdate ? updateCamera : saveCamera
          cameraApi(this.form)
            .then((data) => {
              this.$message.success(data.msg);
              console.log('data', data)
              this.$emit('load')
              this.updateVisible(false)
            })
            .catch((e) => {
              this.$message.error(e);
            });
        });
      }
    }
  }
</script>


<style scoped lang="less">
  /*隐藏input（type=number)右边的小箭头*/
  /deep/.delInput input::-webkit-outer-spin-button,
  /deep/.delInput input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
  /deep/.delInput input[type="number"]{
    -moz-appearance: textfield;
  }

  .slecet-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    button{
      width: 90px;
      height: 36px;
      border-radius: 2px;
      margin: 20px 0;
    }
    button:first-child{
      margin-right: 46px;
    }
  }
</style>
